<template>
  <div>
    <!-- 显示接收到的参数信息 -->
    <el-card style="margin-bottom: 20px;" v-if="route.query.Num">
      <div style="display: flex; gap: 20px; align-items: center;">
        <span><strong>商品编码:</strong> {{ route.query.sid }}</span>
        <span><strong>产品状态:</strong> {{ route.query.productState }}</span>
        <span><strong>入库数量(Num):</strong> <el-tag type="primary">{{ route.query.Num }}</el-tag></span>
      </div>
    </el-card>
    
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="sid" label="商品编码" width="180" />
      <el-table-column prop="productName" label="商品名称" width="180" />
      <el-table-column prop="productStandard" label="规格" />
      <el-table-column prop="productCount" label="出库数量" />
      <el-table-column prop="productColor" label="颜色" />
      <el-table-column prop="productState" label="状态" >
        <template v-slot="scope">
          <el-tag type="success" v-if="scope.row.productState==1">已出库</el-tag>
        </template>
      </el-table-column>   
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue';
import { APIs, DingDanAPI } from '@/Http/http';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute();
const router = useRouter();


// 清空路由参数的函数
const clearRouteParams = () => {
  if (Object.keys(route.query).length > 0) {
    console.log('清空路由参数:', route.query);
    router.replace({
      path: route.path,
      query: {}
    });
  }
};

onMounted(()=>{
  syncRouteToState();
  
  if (Object.keys(route.query).length > 0) {
    GetChuku();
    ShowChuin();
    
    setTimeout(() => {
      clearRouteParams();
    }, 1000);
  } else {
    ShowChuin();
  }
})
const xy = reactive({
  code: '',
  productState: 1,
  batches: [] as Array<{ count: number; outNo: string }>
})

const syncRouteToState = () => {
  const { sid, productState, Num } = route.query

  if (sid) {
    xy.code = String(sid)
  }

  if (productState) {
    xy.productState = Number(productState)
  } else {
    xy.productState = 1
  }

  if (Num) {
    xy.batches = [
      {
        count: Number(Num),
        outNo: String(sid || '')
      }
    ]
  } else {
    xy.batches = []
  }
}
// const ChuKu=()=>{
//   APIs.post("/api/Write/Chuku",xy).then(res=>{
//     if(res.data.code==100)
//   {
//       ElMessage.success("出库成功")
//   }
//   })

// }
const GetChuku=()=>{
  DingDanAPI.get("/api/DingDan/GetMes",{
  params:{
     sid:xy.code,
     productState:xy.productState,
     Num:xy.batches[0]?.count
  }
  }).then(res => {
    console.log('GetMes API 响应:', res.data);
    ElMessage.success("出库成功")
    ShowChuin();
  })
}
const tableData = ref([])
const ShowChuin=()=>{
  DingDanAPI.get("/api/DingDan/ShowChukuinfo").then(res=>{
    tableData.value=res.data.data;
  })
}
</script>
